<template>
  <div class="study-planner-container">
    <div class="card shadow-sm mb-4 study-card">
      <!-- 标题区域 -->
      <div class="card-header study-header text-truncate p-3 text-center">
        <h3 class="mb-0 jumping-text"><!-- 动态拆分每个字符并添加独立动画延迟 --> 
          <!-- 动态拆分每个字符并添加独立动画延迟 -->
          <span class="jumping-char" v-for="(char, index) in '学习计划表'" :key="index" :style="{ animationDelay: `${index * 0.1}s` }"><!-- 逐个渲染标题字符 -->
            {{ char }}
          </span>
        </h3>
      </div>
      <!-- 表单提交区域 -->
      <div class="card-body p-3">
		  <!-- 表单提交事件绑定，使用prevent修饰符阻止默认提交行为 -->
        <form @submit.prevent="add">
          <div class="row g-2 g-md-3 align-items-center">
            <!-- 学习科目输入组 -->
            <div class="col-12 col-md-6 col-lg-3 mb-2 mb-md-0">
              <div class="input-group study-input-group">
                <span class="input-group-text">学习科目</span>
				<!-- 文本输入框，使用v-model双向绑定subject数据，trim修饰符去除首尾空格 -->
                <input type="text" class="form-control form-control-sm" placeholder="请输入学习科目" v-model.trim="subject" />
              </div>
            </div>
            <!-- 学习内容输入组 -->
            <div class="col-12 col-md-6 col-lg-4 mb-2 mb-md-0">
              <div class="input-group study-input-group">
                <span class="input-group-text">学习内容</span>
				<!-- 文本域输入，双向绑定content数据 -->
                <textarea class="form-control form-control-sm" v-model.trim="content" placeholder="请输入学习内容"></textarea>
              </div>
            </div>
            <!-- 学习地点选择组 -->
            <div class="col-12 col-md-6 col-lg-3 mb-2 mb-md-0">
              <div class="input-group study-input-group">
                <span class="input-group-text">学习地点</span>
				<!-- 下拉选择框，双向绑定selectedOption数据 -->
                <select class="form-select form-select-sm" v-model="selectedOption">
					<!-- 动态渲染地点选项，使用v-for遍历options数组 -->
                  <option v-for="option in options" :value="option.place" :key="option.placeCode">
                    {{ option.place }}
                  </option>
                </select>
              </div>
            </div>
            <!-- 添加按钮 -->
            <div class="col-12 col-md-6 col-lg-2 d-grid d-md-block">
				<!-- 提交按钮，点击触发form的add()函数 -->
              <button type="submit" class="btn study-btn btn-sm w-100 text-light">
                添加
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!-- 计划表区域 -->
    <div class="table-responsive study-table-container">
      <table class="table study-table table-hover table-sm">
        <thead>
          <tr class="study-table-header">
            <th scope="col" class="text-nowrap text-center">序号</th>
            <th scope="col" class="text-nowrap text-center">学习科目</th>
            <th scope="col" class="text-nowrap text-center">学习内容</th>
            <th scope="col" class="text-nowrap text-center">学习地点</th>
            <th scope="col" class="text-nowrap text-center">完成状态</th>
            <th scope="col" class="text-nowrap text-center">操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- 动态渲染学习计划列表 -->
          <tr v-for="item in list" :key="item.id" :class="['study-table-row', { 'completed-row': item.status }]">
            <td class="align-middle">{{ item.id }}</td>
            <td class="align-middle text-truncate subject-cell">{{ item.subject }}</td>
            <td class="align-middle text-truncate content-cell">{{ item.content }}</td>
            <td class="align-middle">{{ item.place }}</td>
            <td class="align-middle">
              <div class="form-check form-switch p-0 d-block switch-container">
                <div class="switch-wrapper">
					<!-- 绑定完成状态到checkbox -->
                  <input class="form-check-input mx-auto" type="checkbox" role="switch" :id="'cb' + item.id" v-model="item.status" />
                  <label class="form-check-label" :for="'cb' + item.id">
                    {{ item.status ? '已完成' : '未完成' }}
                  </label><!-- 根据状态动态显示文本 -->
                </div>
              </div>
            </td>
            <td class="align-middle">
				<!-- 删除按钮的交互绑定 --><!-- 点击时传递当前项的ID和状态到remove函数 -->
              <button class="btn study-btn btn-sm p-1 text-light" @click="remove(item.id, item.status)">
                删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
//  存储学习计划列表的响应式数据，初始包含一个示例学习计划，包含ID、科目、内容、地点和完成状态
const list = ref([
  {
    id: '1',
    subject: 'Vue.js前端实战开发',
    content: '学习指令，例如v-if、v-for、v-model等',
    place: '自习室',
    status: false,
  },
])
// 表单输入字段的响应式数据
let subject = ref('')        // 学习科目输入值
let content = ref('')        // 学习内容输入值
let nextId = ref('')         // 下一个计划项的ID（通过计算生成）
let selectedOption = ref('自习室')  // 学习地点选择值
// 学习地点选项数据，包含地点编码和显示名称，用于下拉菜单渲染
let options = ref([
  { placeCode: 0, place: '自习室', },
  { placeCode: 1, place: '图书馆', },
  { placeCode: 2, place: '宿舍', },
])
/**
 * 删除学习计划项的函数
 * @param {string} id - 要删除的计划项ID
 * @param {boolean} status - 计划项的完成状态
 * 逻辑：仅允许删除已完成的计划项，未完成时弹出提示
 */
let remove = (id, status) => {
  if (status) {
    // 过滤掉指定ID的计划项，更新列表
    list.value = list.value.filter(item => item.id !== id)
  } else {
    alert('请完成该学习计划后再进行删除操作！')
  }
}
/**
 * 添加新学习计划的函数
 * 逻辑：验证必填字段，生成新ID，创建计划对象并添加到列表，最后清空表单
 */
let add = () => {
  // 验证学习科目是否为空，为空则提示并终止操作
  if (subject.value === '') {
    alert('学习科目为必填项！')
    return 
  }
  // 计算下一个计划项的ID：取现有ID的最大值+1
  nextId.value = Math.max(...list.value.map(item => item.id)) + 1
  // 创建新的学习计划对象
  const obj = {
    id: nextId.value,
    subject: subject.value,
    content: content.value,
    place: selectedOption.value,
    status: false,  // 新计划默认未完成
  }
  // 将新计划添加到列表
  list.value.push(obj)
  // 清空表单输入字段并重置地点选择
  subject.value = ''
  content.value = ''
  selectedOption.value = '自习室'
}
</script>

<style>
.study-planner-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.study-card {
  border-radius: 12px;
  border: none;
  overflow: hidden;
  background-color: #f8f9fa;
}

.study-header {
  height: 100px;
  background: linear-gradient(135deg, #f9bef8 0%, #7ba8fc 100%);
  color: white;
  border-bottom: none;
}

.jumping-text {
  display: inline-block;
  line-height: 100px;
  letter-spacing: 0.5em;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.jumping-char {
  display: inline-block;
  position: relative;
  animation: jump 0.5s ease infinite alternate;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
    text-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
  }
}

/* 输入组样式 */
.study-input-group {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.study-input-group .input-group-text {
  background-color: #e9ecef;
  font-weight: 500;
  color: #495057;
}

.study-input-group .form-control,
.study-input-group .form-select {
  border-left: none;
  background-color: #fff;
}

/* 按钮样式 */
.study-btn {
  background-color: #4e73df;
  border: none;
  transition: all 0.3s;
}

.study-btn:hover {
  background-color: #3a56c0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 表格容器 */
.study-table-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 表格样式 */
.study-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.study-table-header {
  background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
  color: white;
}

.study-table-header th {
  padding: 12px 8px;
  font-weight: 500;
  border: none;
}

.study-table-row {
  transition: all 0.2s;
}

.study-table-row:hover {
  background-color: #d6fdf9 !important;
}

.completed-row {
  background-color: #f0f7f0;
}

.completed-row:hover {
  background-color: #e0efe0 !important;
}

/* 单元格样式 */
.subject-cell {
  max-width: 150px;
  font-weight: 500;
}

.content-cell {
  max-width: 200px;
}

/* 开关样式 */
.switch-container {
  display: flex !important;
  justify-content: center;
}

.switch-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-check-input:checked {
  background-color: #cef3ef;
  border-color: #28a745;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .study-planner-container {
    padding: 10px;
  }
  
  .jumping-text {
    letter-spacing: 0.2em;
  }
  
  .study-header {
    height: 80px;
  }
}
</style>